<template>
  <div style="margin-top: 20px">
    <el-form ref="form" :model="form" label-width="80px">
      <el-row>
        <el-col :span="10">
          <el-form-item label="所属系统" style="margin-bottom:10px;text-align: left;">
            <el-select v-model="form.sys_type" style="width:85%">
              <el-option 
                v-for="item in dics.xtlx" 
                :key="item.dict_code" 
                :label="item.dict_name" 
                :value="item.dict_code">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="菜单名称" style="margin-bottom:10px;">
            <el-input v-model="form.menu_name" ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-form-item label="排序" style="margin-bottom:10px;text-align: left;">
            <el-input v-model="form.menu_number" style="width:85%" ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="菜单路径" style="margin-bottom:10px;">
            <el-input v-model="form.menu_url" ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-form-item label="菜单图标" style="margin-bottom:10px;">
            <el-input placeholder="选择图标" class="search" size="large" v-model="form.menu_icon" clearable style="margin-left:0;margin-top:0;width:85%;">
              <el-popover  placement="right" width="300" trigger="click" slot="append"
                           ref="popper">
                <el-row>
                  <el-col v-for="(item,index) in cities" :key=index :span="3">
                    <el-button  :icon="`el-icon-lx-${item}`" @click="selectIcon('el-icon-lx-',{item})"></el-button>
                  </el-col>
                </el-row>
                <el-button slot="reference">选择</el-button>
              </el-popover>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-form-item label="类型" style="margin-bottom:10px;text-align: left;">
            <el-radio v-model="form.menu_type" label="0">菜单</el-radio>
            <el-radio v-model="form.menu_type" label="1">按钮</el-radio>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="状态" style="margin-bottom:10px;text-align: left;">
            <el-radio v-model="form.menu_status" label="1">启用</el-radio>
            <el-radio v-model="form.menu_status" label="0">禁用</el-radio>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item label="上级菜单" style="margin-bottom:10px;">
          <el-col :span="10">
            <el-tree
                :highlight-current="true"
                ref="menu_tree"
                node-key="menu_pk"
                :data="treeData"
                :props="defaultProps"
                @node-click="handleNodeClick"
                :default-expanded-keys="keyArry"
                style="width:75%;"
            >
            </el-tree>
          </el-col>
        </el-form-item>
      </el-row>
    </el-form>
    <span style="text-align: center;display: block">
      <el-button type="primary" @click="save">保 存</el-button>
    </span>
  </div>
</template>
<script>
export default {
  name: "cesAdd",
  inject: ['refresh','hiddenAndGotoTab'],
  props: {
    data: {
      menu_pk: '',
      sys_type:'',
    }
  },
  data() {
    return {
      dics: {},
      url_menu: '/auth/menu/getMenuInfo',
      url_tree: '/auth/menu/tree_menu_list',
      url_xtlx: '/auth/dict/selectDict',
      url_save: '/auth/menu/menuSaveUpdate',
      form: {
        menu_name: '',
        menu_pk: '',
        menu_parent: '',
        menu_url: '',
        menu_icon: '',
        menu_number: '',
        menu_status: '',
        menu_type: '',
        sys_type:'',
      },
      isEdit: false,
      disabForm: true,
      isIF: true,
      isIFButton: false,
      treeData:[],
      defaultProps: {
        children: 'children',
        label: 'menu_name',
      },
      keyArry:[],
      xtlx:[],
      cities: [
        'attentionforbid', 'attentionforbidfill', 'attention', 'attentionfill', 'tag', 'tagfill', 'people',
        'peoplefill', 'notice', 'noticefill', 'mobile','mobilefill','voice','voicefill', 'unlock','lock',
        'home', 'homefill', 'delete','deletefill', 'notification','notificationfill', 'notificationforbidfill',
        'like', 'likefill', 'comment', 'commentfill', 'camera', 'camerafill', 'warn', 'warnfill', 'time',
        'timefill', 'location', 'locationfill', 'favor', 'favorfill', 'skin', 'skinfill', 'news', 'newsfill',
        'record', 'recordfill', 'emoji', 'emojifill', 'message', 'messagefill', 'goods', 'goodsfill', 'crown', 'crownfill',
        'move', 'add', 'hot', 'hotfill', 'service', 'servicefill', 'present', 'presentfill', 'pic', 'picfill', 'rank',
        'rankfill', 'male', 'female', 'down', 'top', 'recharge', 'rechargefill', 'forward', 'forwardfill',
        'info', 'infofill', 'redpacket', 'redpacket_fill', 'roundadd', 'roundaddfill', 'friendadd', 'friendaddfill',
        'cart', 'cartfill', 'more', 'moreandroid', 'back', 'right', 'shop', 'shopfill', 'question', 'questionfill',
        'roundclose', 'roundclosefill', 'roundcheck', 'roundcheckfill', 'global', 'mail', 'punch', 'exit', 'upload',
        'read', 'file', 'link', 'full', 'group', 'friend', 'profile', 'addressbook', 'calendar', 'text', 'copy',
        'share', 'wifi', 'vipcard', 'weibo', 'remind', 'refresh', 'filter', 'settings', 'scan', 'qrcode', 'cascades',
        'apps', 'sort', 'searchlist', 'search', 'edit'
      ]
    }
  },
  //生命周期函数
  created() {
    this.fetchTemplateData();
    this.form.menu_type = '0';
    this.form.menu_status = '1';
  },
  methods: {
    //选择菜单图标事件
    selectIcon(val,obj) {
      this.form.menu_icon = val+obj.item;
    },
    //系统了类型下拉菜单
    fetchTemplateData(){
        this.dics.xtlx = this.$getDict('XTLX');//系统类型
    },
    //获取菜单信息
    getMenuInfo(menu_pk) {
      debugger
      if (menu_pk != null && menu_pk != '' && menu_pk != undefined) {
        this.$post(this.url_menu, {menu_pk: menu_pk}).then(res => {
          if (res) {
            this.form.sys_type = res[0].sys_type;
          }
        });
      }
    },
    //选中菜单树节点事件
    handleNodeClick(data) {
      console.log(data);
      this.form.menu_parent = data.menu_pk;
    },
    //获取菜单树
    getMenuTree(){
      this.keyArry = [];
      this.data.menu_status = '1';
      this.data.menu_parent = '0';
      this.$post(this.url_tree,this.data).then(res => {
        if(res){
          this.treeData = res;
          //默认选中该节点样式
          this.$nextTick(() => {
            // tree 元素的ref   value 绑定的node-key
            this.$refs.menu_tree.setCurrentKey(this.data.menu_pk);
          });
          this.keyArry.push(this.data.menu_pk);
          this.form.menu_parent = this.data.menu_pk;
        }
      })
    },
    save(){
      delete this.form.children;
      this.$post(this.url_save, this.form).then(res => {
        this.$message({
          type : res.code,
          message: res.msg,
        });
        if (res.code == 'success'){
          debugger
          //刷新本页菜单树
          this.getMenuTree();
          //刷新左侧菜单树
          this.refresh(this.data.menu_pk);
          //隐藏标签页,跳转第一个标签页
          this.hiddenAndGotoTab();
        }
      });
    }
  },
  mounted() {

  },
  watch: {
    'data.menu_pk': {
      handler(newValue, oldValue) {
        if (newValue) {
          debugger
          this.getMenuInfo(newValue);
          this.getMenuTree();
        }
      },
      immediate:true
    }
  },
}
</script>
<style>
/* .el-input--suffix .el-input__inner {
  padding-right: 98px;
} */
</style>